<template>
  <div>
    <el-button type="primary" :disabled="props.id <= 0" class="addButton" @click="addAttr()">
      {{ "添加" + props.title }}
    </el-button>
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column prop="attr_name" label="参数名称" />
      <el-table-column label="操作">
        <template #default="scope">
          <div>
            <el-button type="primary" icon="Edit" @click="setAttr(scope)">
              编辑
            </el-button>
            <el-button type="danger" icon="Delete" @click="deleteAttr(scope)">
              删除
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- Dialog -->
    <el-dialog v-model="isShowDialog" :title="DialogType.title" width="40%">
      <el-form :model="form" label-width="100px" status-icon :rules="rules" ref="ruleFormRef">
        <el-form-item :label="props.title" prop="attr_name">
          <el-input v-model="form.attr_name" />
        </el-form-item>
        <el-form-item label="参数基础值" prop="attr_vals">
          <el-input v-model="form.attr_vals" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="onsubmit(ruleFormRef)">
            提交
          </el-button>
          <el-button @click="closeDialog(ruleFormRef)">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { defineProps, reactive, watchEffect, ref } from "vue";
import { getAttrs, deleteAttrs, addAttrs, setAttrs } from "@/api/goods";
import { ElMessageBox, ElMessage } from "element-plus";
let props = defineProps({
  title: {
    type: String,
  },
  id: {
    type: Number,
    default: -1,
  },
  typeName: {
    type: String,
  },
});
let tableData = reactive([]);
let form = reactive({});
let ruleFormRef = ref(null);
let isShowDialog = ref(false);
let DialogType = reactive({});
let rules = {
  attr_name: [
    { required: true, message: "参数/属性 不能为空", trigger: "blur" },
  ],
};
// 函数
const getTableData = async () => {
  let res = await getAttrs(props.id, { sel: props.typeName });
  tableData.splice(0);
  tableData.push(...res.data);
};
//删除属性
const deleteAttr = (scope) => {
  ElMessageBox.confirm("此操作将永久删除, 是否继续?", "Warning", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    callback: async (action) => {
      if (action == "confirm") {
        let res = await deleteAttrs(props.id, scope.row.attr_id);
        let ls = Boolean(res.meta.status >= 200 && res.meta.status < 300);
        ElMessage({
          type: ls ? "success" : "error",
          message: ls ? "删除成功" : res.meta.msg,
        });
        getTableData();
      } else {
        ElMessage({
          type: "info",
          message: "取消删除",
        });
      }
    },
  });
};
//修改属性
const setAttr = (scope) => {
  Object.assign(form, scope.row);
  DialogType.type = 2;
  DialogType.msg = "修改";
  DialogType.attr_id = scope.row.attr_id;
  isShowDialog.value = true;
};
//添加属性
const addAttr = () => {
  form = reactive({});
  DialogType.type = 1;
  DialogType.msg = "添加";
  isShowDialog.value = true;
};
//监听传来的分类id
watchEffect(() => {
  if (props.id > 0) {
    getTableData();
  } else {
    tableData.splice(0);
  }
});

const onsubmit = (ruleFormRef) => {
  ruleFormRef.validate(async (isValid) => {
    if (isValid) {
      let res;
      if (DialogType.type == 1) {
        res = await addAttrs(props.id, { ...form, attr_sel: props.typeName });
      } else {
        res = await setAttrs(props.id, DialogType.attr_id, form);
      }
      ElMessageBox.alert(res.meta.msg, "", {
        // if you want to disable its autofocus
        // autofocus: false,
        confirmButtonText: "确认",
        callback: () => {
          let ls = Boolean(res.meta.status >= 200 && res.meta.status < 300);
          ElMessage({
            type: ls ? "success" : "error",
            message: ls ? DialogType.msg + "成功" : DialogType.msg + "失败",
          });
        },
      });
      closeDialog(ruleFormRef);
      getTableData();
    }
    // ruleFormRef.resetFields();
  });
};
//关闭Dialog窗口
const closeDialog = (ruleFormRef = null) => {
  if (ruleFormRef != null) ruleFormRef.resetFields();
  isShowDialog.value = false;
};
</script>

<style lang="scss" scoped>
.addButton {
  margin-bottom: 10px;
}
</style>